<template>
	<div>
		<span>国内数据</span>
		<el-col :span="24">
			<el-tooltip content="回车查询" placement="top-start">
				<el-input style="margin-top: 15px;" placeholder="请输入内容" @keyup.enter.native="searchMessage()"
					v-model="searchmessage" clearable>
					<template slot="prepend">城市:</template>
				</el-input>
			</el-tooltip>
			<el-table :data="searchmessage==''?cityLists:city" :height="tableHeight"
				style="width: 100%;font-size: calc(1.1876em);">
				<el-table-column property="provinceName" label="省" width="90">
				</el-table-column>
				<el-table-column property="cityName" label="城市">
				</el-table-column>
				<el-table-column property="confirmedNum" label="确诊病例"></el-table-column>
				<el-table-column property="deadNum" label="死亡病例"></el-table-column>
				<el-table-column property="suspectedNum" label="疑似病例"></el-table-column>
				<el-table-column property="curedNum" label="治愈病例"></el-table-column>
			</el-table>
		</el-col>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				city: [], //单个城市数据
				list: [],
				cityLists: [], //中国城市数据
				searchmessage: "", //查询
				tableHeight: 500, //表高度
			}
		},
		methods: {
			searchMessage: function() {
				this.city = []
				let len = this.cityLists.length
				for (var i = 0; i < len; i++) {
					if (this.searchmessage == this.cityLists[i].cityName) {
						console.log("查询成功");
						this.city.push({
							provinceName: this.cityLists[i].provinceName,
							cityName: this.cityLists[i].cityName,
							locationId: this.cityLists[i].locationId,
							confirmedNum: this.cityLists[i].confirmedNum,
							deadNum: this.cityLists[i].deadNum,
							suspectedNum: this.cityLists[i].suspectedNum,
							curedNum: this.cityLists[i].curedNum
						})
						console.log(this.city);
						break
					}
				}
			},
			createmessageechart: function() {
				this.$axios({
					method: 'post',
					url: 'http://route.showapi.com/2217-2?showapi_appid=610642&showapi_sign=200e35bac9af4e4ab0f0d360336098f6'
				}).then(response => {
					let len = response.data.showapi_res_body.todayDetailList.length
					this.list = response.data.showapi_res_body.todayDetailList
					for (var i = 0; i < len; i++) {
						let citylen = response.data.showapi_res_body.todayDetailList[i].cityList.length
						for (var j = 0; j < citylen; j++) {
							this.cityLists.push({
								provinceName: this.list[i].provinceName,
								cityName: this.list[i].cityList[j].cityName,
								locationId: this.list[i].cityList[j].locationId,
								confirmedNum: this.list[i].cityList[j].confirmedNum,
								deadNum: this.list[i].cityList[j].deadNum,
								suspectedNum: this.list[i].cityList[j].suspectedNum,
								curedNum: this.list[i].cityList[j].curedNum
							})
						}
					}
				}).catch(error => {
					console.log(error);
				})
			},
			getHeight() {
				console.log(window.innerHeight);
				this.tableHeight = window.innerHeight - 550
			}
		},
		mounted() {
			this.createmessageechart()
		},
		created() {
			window.addEventListener('resize', this.getHeight)
		},
		destroyed() {
			window.removeEventListener('resize', this.getHeight)
		}
	}
</script>

<style>
	.middle_chinaData {
		padding-top: 5px;
		text-align: center;
		border: 1px #F8F9FA solid;
		background-color: white;
	}
</style>
